<template>
  <div class="rage" v-if="data.length">
    <!-- 自定义导航栏 -->
    <custom-navigation :title="title" ref="navigator"></custom-navigation>
    <scroll-view
      class="container"
      scroll-y
      scroll-with-animation
      @scroll="scrollHandler"
      @scrolltolower="scrollToLower"
      scroll-top="SCROLL_TOP"
      v-if="data.length"
    >
      <!-- 顶部轮播图 -->
      <swiper class="header-swiper" autoplay circular>
        <swiper-item class="item">
          <img :src="data[0].img_url" mode="widthFix" style="width:100%">
        </swiper-item>
        <swiper-item class="item">
          <img :src="data[1].img_url" mode="widthFix" style="width:100%">
        </swiper-item>
        <swiper-item class="item">
          <img :src="data[2].img_url" mode="widthFix" style="width:100%">
        </swiper-item>
      </swiper>
      <!-- 顶部文字 -->
      <div class="header-text">复杂的世界里，一个就够了</div>
      <!-- 图文框 -->
      <div class="card-wrapper">
        <text-card 
          v-for="card in data"
          :key="card.id"
          :card="card"
        />
      </div>
    </scroll-view>
  </div>
</template>

<script>
import CustomNavigation from '@/components/CustomNavigation/CustomNavigation.vue'
import TextCard from '@/components/TextCard/TextCard.vue'

// const {API} = require('@/utils/api.js')
const db = wx.cloud.database()
// const Api = new API()
export default {
  name: 'Rage',
  data () {
    return {
      title: '词不达意',
      data: [],
      page: 0,
      SCROLL_TOP: 0
    }
  },
  methods: {
    scrollToLower () {
      this._getData()
    },
    scrollHandler (e) {
      let {scrollTop} = e.target
      if (scrollTop > 250) {
        this.$refs.navigator.changeOpacity(1)
        return
      }
      let opacity = parseFloat(scrollTop / 200).toFixed(2)
      if (opacity > 1) opacity = 1
      if (opacity < 0.1) opacity = 0
      this.$refs.navigator.changeOpacity(opacity)
    },
    _getData () {
      // 第一次请求数据
      this.page++
      db.collection('ones')
        .orderBy('id', 'desc')
        .limit(10)
        .skip(this.page * 10)
        .get()
        .then(res => {
          this.data.push.apply(this.data, res.data)
        })
        .catch(err => console.error(err))
      // Api.getData(this.page)
      //   .then(datas => {
      //     this.page = datas.slice(-1)[0].id
      //     this.data.push.apply(this.data, datas)
      //     this.setOnes(this.data)
      //   })
    },
    _init () {
      this.page = 0
      this.data = []
      // 第一次获取数据
      db.collection('ones')
        .orderBy('id', 'desc')
        .limit(10)
        .get()
        .then(res => {
          this.data.push.apply(this.data, res.data)
        })
        .catch(err => console.error(err))
    }
  },
  mounted () {
    this._init()
  },
  components: {
    CustomNavigation,
    TextCard
  }
}
</script>

<style lang="stylus" scoped>
  .rage
    height 100%
  .container
    position absolute
    left 0
    top 0
    height 100%
    background: linear-gradient(135deg, #ffffff 0%, #eeeeee 100%)
    .header-swiper
      top 0
      left 0
      height 250px
    .header-text
      position absolute
      top 0
      width 100%
      height 250px
      line-height 250px
      font-size 18px
      text-align center
      color #ffffff
      font-weight 200
</style>

